<template>
    <div class="CalendarView" >
        <div class="CalendarView-flex">
            <div class="CalendarView-head">
                <div class="CalendarView-head-le">{{i18n('mySchedule','我的日程')}}</div>
                <div class="CalendarView-head-ri">
                    <span class="CalendarView-head-ri-add" v-if="buttonsHead.length>0" @click="handButtonClick(null,buttonsHead[0])">{{buttonsHead[0].btnLabel}}</span>
                    <div class="CalendarView-head-ri-more"  v-if="buttonsHead.length>1">
                        <div class="CalendarView-head-ri-more-icon">
                            <rx-icon-show icon="icon-lineVue3_more"></rx-icon-show>
                        </div>
                        <ul class="CalendarView-head-ri-more-hover">
                            <li v-for="(obj,index) in buttonsHead" @click="handButtonClick(null,obj)" >
                                <span v-if="index>0">{{obj.btnLabel}}</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div>
                <div class="CalendarView-schedule-head">
                    <div @click="goPrev" class="CalendarView-schedule-head-left"><i class="iconfont iconjiantou_liebiaoxiangzuo"></i></div>
                    <div @click="goNext" class="CalendarView-schedule-head-left"><i class="iconfont iconjiantou_liebiaoxiangyou"></i></div>
                    <div class="CalendarView-schedule-head-data">{{curDate}}</div>
                    <div @click="todayCalendar" class="CalendarView-schedule-head-today" >{{$ti18('rxDate.today','今天')}}</div>
                </div>
                <a-calendar class="CalendarView-schedule" :fullscreen="false" @select="onCalendarSelect" v-model:value="calendarCurDate" :locale="locale"  @panelChange="onCalendarSelect" >
                    <template #dateCellRender="value">
                      <ul class="events">
                        <span :class="[value.current.format('YYYY-MM-DD') ==curDate?'calend-span-red':'calend-span']" v-if="getCalendarDayListData(value)"></span>
                      </ul>
                    </template>
                </a-calendar>
                <div class="CalendarView-relist-common" v-if="calendarView">
                    <div class="CalendarView-relist">{{curDate}}{{ calendarView.name }}{{i18n('schedule','日程')}}</div>
                    <div class="CalendarView-relist-common-ri" @click="more()">{{$ti18('rxList.all','全部')}}
                        <rx-icon-show icon="icon-fillicon-test47"></rx-icon-show>
                    </div>
                </div>
            </div>
            <div class="alendarView-list-flex" v-if="monthData.length !=0 && dayData.length !=0">
                <div class="CalendarView-list" v-for="data in dayData">
                    <div class="CalendarView-list-left">
                        <div class="CalendarView-list-head" v-for="name in dayColumns">{{data[name.key]}}</div>
                    </div>
                    <div class="CalendarView-list-right">
                        <span v-if="filtersDate(data.start)">{{filtersDate(data.start)}}</span>
                        <div class="CalendarView-list-right-more">
                            <rx-icon-show style="margin: 0px 10px" icon="icon-lineVue3_more"></rx-icon-show>
                            <ul class="CalendarView-list-right-more-hover">
                                <li v-for="(obj,index) in buttonsRow" @click="handButtonClick(data,obj)">{{obj.btnLabel}}</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <a-empty v-if="monthData.length ==0 || dayData.length ==0"/>
        </div>
    </div>
</template>

<script>
/**
 * 自定义页面(日历组件)
 */
import CalendarViewFunc from './CalendarViewFunc.js'
import FormCustomPublic from "../FormCustomPublic.js";
import dayjs from 'dayjs'
import { Util } from '@lowcode/jpaas-base-lib';
import FormCalendarViewApi from "@/common/api/form/formCalendarView.js";
import {debounce} from 'lodash-es';
import FormCalendarViewShow from "@/views/modules/form/FormCalendarViewShow/FormCalendarViewShow.vue";
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
import 'dayjs/locale/zh-cn';
import BusEvent from "../BusEvent";
dayjs.locale('zh-cn');

export default {
    name: "calendarView",
    inject:['appId'],
    mixins: [CalendarViewFunc,FormCustomPublic,BusEvent],
    data() {
        return {
            //当前月数据
            monthData:[],
            //当月全量数据(未重构)
            allMonthData:[],
            //当前日详细数据
            dayData:[],
            calendarView:"",
            //当前年月
            curYearAndMonth:"",
            //当前日期 年月日
            curDate:"",
            calendarCurDate:'',
            format:"YYYY-MM-DD HH:mm:ss",
            //按钮
            buttonsRow:[],
            buttonsHead:[],
            idField:"",
            dayColumns:[],
            locale,
        }
    },
    created() {
        this.calendarCurDate = dayjs();
        this.init();
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "formCustom", key);
        },
        //确定当天
        todayCalendar(){
            let date = dayjs().format("YYYY-MM-DD");
            this.calendarCurDate = dayjs();
            this.onCalendarSelect(date);
        },
        goPrev () {
            this.curDate = dayjs(this.curDate).subtract(1, 'months').startOf('month').format("YYYY-MM-DD");
            this.onCalendarSelect(this.curDate);
        },
        goNext () {
            this.curDate = dayjs(this.curDate).add(1, 'months').startOf('month').format("YYYY-MM-DD");
            this.onCalendarSelect(this.curDate);
        },
        filtersDate(value){
            if(value){
                let obj = value.split(' ')
                if(obj[1] && obj[1]!='00:00'){
                    return obj[1]
                }else {
                    return
                }
            }else {
                return ''
            }
        },
        init() {
            if (this.config) {
                //取路由参数
                let  params=this.getRouterParams();
                let  date="";
                //读取配置的参数
                if(this.config.receive.mapping.length>0){
                    let  mapping=this.config.receive.mapping[0];
                    if(mapping.valueSource == 'param'){
                        if(this.config.receive.type== "url"){
                            if (params[mapping.valueDef]) {
                                date=params[mapping.valueDef];
                            }
                        }else {
                            if (params[mapping.name]) {
                                date=params[mapping.name];
                            }
                        }
                    }
                }
                let  start="";
                let  end="";
                if(date){
                    this.curYearAndMonth=dayjs(date,"YYYY-MM");
                    this.curDate=dayjs(date,"YYYY-MM");
                    start=dayjs(this.curDate).startOf('month').format(this.format);
                    end=dayjs(this.curDate).endOf('month').format(this.format);
                }else {
                    //获取当前月第一天0时0分0秒
                    start=dayjs().startOf('month').format(this.format);
                    //获取当前月最后一天0时0分0秒
                    end=dayjs().endOf('month').format(this.format);
                    this.curYearAndMonth=dayjs().format("YYYY-MM");
                    this.curDate=dayjs().format("YYYY-MM-DD");
                }
                let  self=this;
                this.getParams(this.config.receive.mapping,function (res) {
                    let  params={months:[start,end]};
                    if(res && res.curDate){
                        //获取当前月第一天0时0分0秒
                        let  curStart=dayjs(res.curDate).startOf('month').format(this.format);
                        //获取当前月最后一天0时0分0秒
                        let  curEnd=dayjs(res.curDate).endOf('month').format(this.format);
                        params.months=[curStart,curEnd];
                    }
                    self.loadData(self.config.calendarKey,params,self.curDate);
                })

            }
        },
        loadData(calendarKey,parameter,curDate){
            if(!calendarKey){
                return;
            }
            let params;
            if(parameter){
                params={params:JSON.stringify(parameter)};
            }else {
                let start=dayjs(this.curDate).startOf('month').format(this.format);
                let end=dayjs(this.curDate).endOf('month').format(this.format);
                params={months:[start,end]};
            }
            FormCalendarViewApi.getDataByKey(calendarKey,"",params,this.appId).then(res=>{
                if(res.success && res.data && res.data.calendarView){
                    this.calendarView=res.data.calendarView;
                    this.idField=this.calendarView.columnConf.idField;
                    let optionsButtons = res.data.calendarView.buttonConf;
                    this.buttonsRow = optionsButtons.filter(ther=>{
                        if(ther.btnType =='row'){
                            return ther
                        }
                    })
                    this.buttonsHead = optionsButtons.filter(ther=>{
                        if(ther.btnType =='head'){
                            return ther
                        }
                    })
                    this.allMonthData=res.data.calendarData.monthData;
                    this.initCalendarData(res.data.calendarData.monthData);
                    this.onCalendarSelect(curDate);
                }else {
                    this.$message.error(this.i18n('msg.loadDataTips1','未查询到key为')+calendarKey+this.i18n('msg.calView','的日历视图!'));
                }
            })
        },
        onCalendarSelect(value) {
            let curYearAndMonth=dayjs(value).format("YYYY-MM");
            let curDate=dayjs(value).format("YYYY-MM-DD");
            if(this.curYearAndMonth!=curYearAndMonth){
                this.curYearAndMonth=curYearAndMonth;
                //获取月第一天0时0分0秒
                let start=dayjs(curYearAndMonth).startOf('month').format(this.format);
                //获取月最后一天0时0分0秒
                let end=dayjs(curYearAndMonth).endOf('month').format(this.format);
                this.loadData(this.config.calendarKey,{months:[start,end]},curDate);
            }else {
                this.curDate=curDate;
                this.dayData=[];
                if(this.calendarView.columnConf.timeQuantum){
                    //跨天
                    this.monthData.forEach(item => {
                        if(dayjs(item.start.split(' ')[0]).valueOf() <=dayjs(curDate).valueOf() && dayjs(curDate).valueOf()<= dayjs(item.end.split(' ')[0]).valueOf()){
                            let data=this.getDayData(item);
                            this.dayData.push(data);
                        }
                    });
                }else {
                    //不跨天
                    this.monthData.forEach(item => {
                        if(item.start.includes(curDate)){
                            let data=this.getDayData(item);
                            this.dayData.push(data);
                        }
                    });
                }
                this.publishEvent({component:this.config.alias,params:{"curDate":curDate}});
            }
        },
        initCalendarData(data) {
            if(data){
                this.monthData=[];
                let timeFields=[];
                if(this.calendarView.columnConf.timeFields){
                    timeFields=this.calendarView.columnConf.timeFields
                }else {
                    timeFields=[{
                        startField:this.calendarView.columnConf.startField,
                        endField:this.calendarView.columnConf.endField,
                        background:"",
                    }];
                }
                for (let i = 0; i < timeFields.length; i++) {
                    let timeField=timeFields[i];
                    for (let j = 0; j < data.length; j++) {
                        let item = data[j];
                        let obj={
                            pkId:item[this.idField],
                            title: item.monthTitle,
                            start: item[timeField.startField],
                            cssClass: ["family", "career"],
                            YOUR_DATA: {},
                            background:timeField.background
                        }
                        if(this.calendarView.columnConf.timeQuantum){
                            obj.end=item[timeField.endField]
                        }
                        if(obj.start){
                            this.monthData.push(obj);
                        }
                    }
                }
            }
        },
        //判断当天是否有数据
        getCalendarDayListData(obj) {
            let value = obj.current
            let show = false
            if (this.calendarView && this.calendarView.columnConf && this.calendarView.columnConf.timeQuantum){
                //跨天
                let time = value.format('YYYY-MM-DD');
                this.monthData.forEach(item => {
                    if(dayjs(item.start.split(' ')[0]).valueOf() <=dayjs(time).valueOf() && dayjs(time).valueOf()<= dayjs(item.end.split(' ')[0]).valueOf()){
                        show = true
                    }
                });
            }else {
                //不跨天
                let time = value.format('YYYY-MM-DD');
                this.monthData.forEach(item => {
                    if(item.start.includes(time)){
                        show = true
                    }
                });
            }
            return show
        },
        //发布事件
        publishEvent(data){
            this.$bus.emit('formCustomViewEvent',data);
        },
        handPublicReceive :debounce(function (args, self_){
            let receive=self_?self_.config.receive:[];
            let inputParams=args.params;
            if(receive.type=='event' && receive.publishComponent==args.component){
                let params={};
                //读取配置的参数
                for(let i=0;i<receive.mapping.length;i++){
                    let o=receive.mapping[i];
                    //处理没有配置值来源的情况。
                    if(!o.valueDef && inputParams[o.name]){
                        params[o.name]=inputParams[o.name]
                    }
                    else if(o.valueSource=='param' && params[o.valueDef]){
                        params[o.name]=dayjs(params[o.valueDef]).format('YYYY-MM-DD');
                    }
                }
                if(params.curDate){
                    self_.onCalendarSelect(params.curDate);
                }
            }
        },300),
        //点击日视图触发事件
        dayClick(data){
            this.publishEvent({component:this.config.alias,params:{"curDate":data.value,"pkId":data.pkId}});
            let self=this;
            if(this.config.daySetting.mode=="form" && this.config.daySetting.form){
                let form=JSON.parse(this.config.daySetting.form);
                let config={
                    title: form.text,
                    curVm: self,
                    data: {
                        alias: form.value,
                        pkId: data.pkId,
                        readOnly: this.config.daySetting.readonly,
                    },
                }
                if(this.config.daySetting.isMax=="NO"){
                    config.widthHeight=[this.config.daySetting.width + 'px', this.config.daySetting.height + 'px']
                }else {
                    config.max=true;
                }
                DialogBox.showForm(config, function (action,data) {

                });
            }else if(this.config.daySetting.mode=="link" && this.config.daySetting.link){
                window.open(this.config.daySetting.link);
            }
        },
        getDayData(record){
            this.dayColumns=this.config.daySetting.dayColumns;
            if(!this.dayColumns || this.dayColumns.length==0){
                return record;
            }
            for (let i = 0; i < this.allMonthData.length; i++) {
                let data=this.allMonthData[i];
                if(data[this.calendarView.columnConf.idField]==record.pkId){
                    for (let j = 0; j < this.dayColumns.length; j++) {
                        record[this.dayColumns[j].key]=data[this.dayColumns[j].key];
                    }
                    break;
                }
            }
            return record;
        },
        //更多
        more(){
            Util.open({
                component:FormCalendarViewShow,
                curVm:this,
                max:true,
                title: this.config.calendarName+ this.i18n('calendar','日历视图'),
                data:{
                    calendarKey:this.config.calendarKey,
                }
            },function (action,data){});
        },
        //处理按钮
        handButtonClick(data,button){
            data=data?data:{};
            if(!button) return;
            this[button.btnClick](data);
        },
    },
    watch: {},
}
</script>

<style scoped lang="less">
.CalendarView-list-right-more:hover .CalendarView-list-right-more-hover {
    display: block;
}

.CalendarView-list-right-more-hover li:hover {
    color: #458bff;
}

.CalendarView-list-right-more-hover {
    position: absolute;
    display: none;
    right: 0px;
    z-index: 99;
    background-color: #ffffff;
    box-shadow: 0px 0px 8px 0px rgba(6, 0, 1, 0.1);
    min-width: 70px;
    border-radius: 0px 4px 4px 0px;
    top: 35px;
    padding: 4PX 13PX;

    li {
        height: 25px;
        line-height: 25px;
        border-bottom: 1px solid #e8e8e8;
    }
}
.CalendarView-list-right-more{
    display: flex;
    align-items: center;
    position: relative;
}
.CalendarView-relist-common {
    align-items: center;
    display: flex;
}

.CalendarView-relist-common-ri {
    width: 52px;
    height: 24px;
    text-align: center;
    line-height: 24px;
    background: rgba(69, 139, 255, 0.1);
    border-radius: 2px;
    color: #458bff;
    font-size: 12px;
    cursor: pointer;
    margin-top: 10px;
}

.CalendarView-head-ri-more-icon {
    width: 30px;
    height: 30px;
    border-radius: 4px;
    text-align: center;
    line-height: 30px;
    border: solid 1px #dfdfdf;
    font-size: 20px;
    margin-top: 12px;
    color: #555555;
}

.CalendarView-head-ri-more:hover .CalendarView-head-ri-more-hover {
    display: block !important;
}

.CalendarView-head-ri-more-hover {
    position: absolute;
    display: none;
    right: -22px;
    background-color: #ffffff;
    box-shadow: 0px 0px 8px 0px rgba(6, 0, 1, 0.1);
    border-radius: 0px 4px 4px 0px;
    top: 45px;
    padding: 0PX 13PX;
    width: 82px;

    li {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        height: 20px;
        margin: 2px 0px;
        text-align: center;
        line-height: 20px;
        border-bottom: 1px solid #e8e8e8;
    }
}

.CalendarView-head-ri {
    display: flex;
    position: relative;

    .CalendarView-head-ri-add {
        font-size: 14px;
        color: #458bff;
        cursor: pointer;
    }

    .CalendarView-head-ri-more {
        cursor: pointer;
        margin-left: 20px;
        color: #303030;
        display: flex;
        line-height: 54px;
        font-size: 14px;
    }
}

.CalendarView-head {
    display: flex;
    height: 54px;
    border-bottom: 1px solid #e8e8e8;
    padding: 0px 23px;

    .CalendarView-head-le {
        flex: 1;
        line-height: 54px;
        font-size: 16px;
        color: #333333;
    }
}

.events {
    margin-bottom: 15px !important;
}

.calend-span {
    display: block;
    margin: auto;
    width: 4px;
    border-radius: 4px;
    height: 4px;
    background: #ea3636;
}

.calend-span-red {
    display: block;
    margin: auto;
    width: 4px;
    border-radius: 4px;
    height: 4px;
    background: #1890ff;
}

.CalendarView-head {
    display: flex;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #e8e8e8;
}

.CalendarView-schedule-head {
    display: flex;
    line-height: 30px;
    margin-top: 10px;

    .CalendarView-schedule-head-today {
        border-radius: 7px;
        border: solid 1px #dfdfdf;
        padding: 0px;
        font-size: 13px;
        height: 25px;
        line-height: 25px;
        width: 41px;
        margin-top: 5px;
        text-align: center;
        cursor: pointer;
    }

    .CalendarView-schedule-head-data {
        flex: 1;
        text-align: left;
        font-size: 15px;
        color: #333333;
        font-weight: 700;
    }

    .CalendarView-schedule-head-left:hover {
        background-color: #ebeef0;
        cursor: pointer;
    }

    .CalendarView-schedule-head-left {
        color: #697377;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        text-align: center;
        line-height: 30px;

        i {
            font-size: 27px;
        }

    }
}

.CalendarView-flex {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.CalendarView-flex > div:nth-child(2), .CalendarView-flex > div:nth-child(3) {
    padding: 0px 13px;
}

.alendarView-list-flex {
    overflow: auto;
    flex: 1;
}

.CalendarView-list {
    display: flex;
    border-left: 2px solid #4f65ff;
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
    background-color: #ffffff;
    box-shadow: 0px 0px 4px 0px rgba(6, 0, 1, 0.1);
    border-radius: 0px 2px 2px 0px;

    .CalendarView-list-left {
        margin-left: 7px;
        flex: 1;
        width: calc(100% - 100px);
        padding: 7px 0px;

        div {
            display: block;
            color: #a8b2bd;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .CalendarView-list-head {
            color: #333333;
            margin-bottom: 7px;
        }
    }

    .CalendarView-list-right {
        display: flex;

        span {
            width: 43px;
            height: 24px;
            text-align: center;
            line-height: 24px;
            background-color: #f2f2f2;
            color: #777777;
            border-radius: 4px;
            margin-top: 10px;
            display: block;
        }
    }
}

.CalendarView-relist {
    color: #333333;
    line-height: 30px;
    margin-top: 10px;
    padding-left: 7px;
    font-weight: 700;
    flex: 1;
}

.CalendarView-img {
    position: absolute;
    top: 106px;
    left: 0px;
    height: 272px;
    width: 100%;
}

.CalendarView {
    position: relative;
    height: 100%;
    background-color: #ffffff;
    box-shadow: 0px 1px 2px 0px rgba(6, 0, 1, 0.1);
    border-radius: 3px;

    .ant-fullcalendar-header {
        height: 0px !important;
        padding: 0px;
        overflow: hidden;
        margin-bottom: 10px;
    }

    .ant-fullcalendar-calendar-body {
        padding-top: 0px !important;
    }

    .ant-fullcalendar-column-header {
        line-height: 40px !important;
    }

    .ant-fullcalendar-last-month-cell .ant-fullcalendar-value, .ant-fullcalendar-next-month-btn-day .ant-fullcalendar-value {
        color: rgba(250, 250, 250, 0.3);
    }

    .ant-fullcalendar-value {
        color: white;
    }

    .ant-badge-status-dot {
        position: relative;
        top: 8px !important;
        display: inline-block;
        width: 4px !important;
        height: 4px !important;
        vertical-align: middle;
        border-radius: 50%;
        background: red;
    }

    .ant-fullcalendar-value:hover {
        background: none;
        -webkit-box-shadow: 0 0 0 2px #fdfeff inset !important;
        border-radius: 50%;
    }

    .relisdian {
        cursor: pointer;
    }

    .ant-fullcalendar-value {
        width: 35px;
        height: 35px;
        line-height: 34px;
    }

    .ant-fullcalendar-today .ant-fullcalendar-value, .ant-fullcalendar-month-panel-current-cell .ant-fullcalendar-value {
        -webkit-box-shadow: 0 0 0 2px #fdfeff inset !important;
    }

    .ant-fullcalendar-selected-day .ant-fullcalendar-value {
        background-color: white;
        color: #485fff;
    }
}

.CalendarView-schedule {
    .ant-fullcalendar-column-header {
        color: #ffffff !important;
    }

    .ant-fullcalendar-tbody {
        border-top: 1px solid rgba(255, 255, 255, 0.3);
    }

    .ant-fullcalendar {
        background-image: linear-gradient(-33deg,
        #6e52ff 0%,
        #4e66ff 100%),
        linear-gradient(#f0f2f5,
        #f0f2f5);
        border-radius: 5px;
        border: none !important;
        overflow: hidden;
    }

    tr:nth-child(odd) {
        background: none !important;
    }
}
</style>
